<template>
  <div class="search">
    <Card>
      <Row @keydown.enter.native="handleSearch">
        <Form
          ref="searchForm"
          :model="searchForm"
          inline
          :label-width="75"
          class="search-form"
        >
          <Form-item label="地区">
            <regionArea
            ref="region"
              style="width: 350px"
              :showIs="true"
              @selected="selectedRegion"
            />
          </Form-item>

          <Button
            @click="handleSearch"
            class="search-btn"
            type="primary"
            icon="ios-search"
            >搜索</Button
          >
          <Button class="search-btn" type="primary" @click="handleReset"
            >重置</Button
          >
        </Form>
      </Row>
      <!-- 总额 -->
      <p class="titleCount">
        现金余额： <span v-if="data[0]">{{ data[0].shengYu }}</span>
      </p>
      <!-- 应提现金额  -->
      <p class="titleCount">
        应提现金额： <span v-if="data[0]">{{ data[0].yTiXjZ }}</span>
      </p>
      <Table
        :loading="loading"
        border
        width="800"
        :columns="columns"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <Table
        :loading="loading"
        border
        width="800"
        :columns="columnsQY"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <Table
        :loading="loading"
        border
        width="800"
        :columns="columnsPT"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <!-- 应提现金额  -->
      <p class="titleCount">
        充值钱包 对应现金额： <span v-if="data[0]">{{ data[0].czYeXjZ }}</span>
      </p>
      <Table
        :loading="loading"
        border
        width="800"
        :columns="columnsWallt"
        class="mt_10"
        :data="data"
        ref="table"
      ></Table>
      <!-- 盈余  -->
      <p class="titleCount">
        盈余： <span v-if="data[0]">{{ data[0].yingYu }}</span>
      </p>
    </Card>
  </div>
</template>

<script>
import { getPTMemberAlltoXJYU } from "@/api/report.js";
import regionArea from "@/views/agent-manage/region";

export default {
  name: "yyxjhz_xianjin",
  components: {
    regionArea,
  },
  data() {
    return {
      loading: true, // 表单加载状态
      searchForm: {
        // 请求参数
        pageNumber: 1,
        pageSize: 10,
        order: "desc",
        regionId: [],
      },
      outSelectDate: [], // 起止时间
      columns: [
        {
          title: "推广钱包应提现",
          key: "tgYeXjZ",
          align: "center",
          width: "100",
        },
        {
          title: "销售钱包应提现",
          key: "xsTxXj",
          align: "center",
          width: "100",
        }
      ], //总额 会员费总额
     columnsQY:[
       {
          title: "区域代理商应提现",
          key: "qyYTxZ",
          align: "center",
          width: "100",
        },
        {
          title: "会员费应提现",
          key: "qyTgFwYeXj",
          align: "center",
          width: "100",
        },
        {
          title: "服务费应提现",
          key: "qyTgHyYeXj",
          align: "center",
          width: "100",
        },
        {
          title: "应收价差收益",
          key: "jcSyQy",
          align: "center",
          width: "100",
        }
     ],//区域代理商应提现
      columnsPT:[
       {
          title: "平台应提现",
          key: "ptYTxZ",
          align: "center",
          width: "100",
        },
        {
          title: "会员费应提现",
		  key: "ptTgHyYeXj",
          align: "center",
          width: "100",
        },
        {
          title: "服务费应提现",
		  key: "ptTgFwYeXj",
          align: "center",
          width: "100",
        },
        {
          title: "应收价差收益",
          key: "jcSyPt",
          align: "center",
          width: "100",
        }
     ],//区域代理商应提现
     columnsWallt:[
      {
          title: "c端充值钱包",
          key: "cCzYeXj",
          align: "center",
          width: "100",
        },
        {
          title: "B端会员充值钱包",
          key: "bCzYeXj",
          align: "center",
          width: "100",
        },
        {
          title: "天使会员充值钱包",
          key: "tsCzYeXj",
          align: "center",
          width: "100",
        },
        {
          title: "事业会员充值钱包",
          key: "syCzYeXj",
          align: "center",
          width: "100",
        },
        {
          title: "区域代理商充值钱包",
          key: "qyCzYeXj",
          align: "center",
          width: "100",
        }
     ],//充值钱包 对应现金额
    
      data: [], // 表单数据
      allData: {}, //合计数据
    };
  },
  methods: {
    // 起止时间从新赋值
    outSelectDateRange(v) {
      if (v) {
        this.searchForm.startTime = v[0];
        this.searchForm.endTime = v[1];
      }
    },
    // 选中的地址
    selectedRegion(val) {
      console.log(val);
      this.searchForm.regionId = val[0];
    },
    // 搜索
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getData();
    },
     // 重置
    handleReset() {
      this.searchForm = {
        pageNumber: 1,
        pageSize: 10,
        order: "desc",
        regionId: [],
      };
      this.$refs.region.addr = [];
      this.getData();
    },
    //查询会员列表
    getData() {
      this.loading = true;
      this.searchForm.regionId = this.searchForm.regionId.toString();
      getPTMemberAlltoXJYU(this.searchForm).then((res) => {
        if (res.result) {
          this.loading = false;
          this.data = [];
          this.data = res.result;
        }
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
/deep/ .ivu-table-wrapper {
  width: 100%;
}

/deep/ .ivu-card {
  width: 100%;
}

.face {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.item {
  width: 350px !important;
  display: flex;

  > * {
    margin: 0 4px;
  }
}
.titleCount {
  font-size: 24px;
  margin-top: 20px;
  span {
    font-weight: bold;
  }
}
</style>
